import router from '../../router';
import { Component, h } from 'vue';
import { ItemType } from 'ant-design-vue';
import { useLocale } from '../../hooks/locale';
import { RouteRecordRaw } from 'vue-router';

const { locale } = useLocale(); // 引入 locale

const DashBoard = getRouterInfo('/home/index');
const Project = getRouterInfo('/home/project');
const Task = getRouterInfo('/home/task');
const Schedule = getRouterInfo('/home/schedule');
const Knowledge = getRouterInfo('/home/knowledge');
const Statistics = getRouterInfo('/home/statistics');
const User = getRouterInfo('/home/users');
// const Message = getRouterInfo('/home/message');

/**
 * 根据当前路由文件，动态生成侧边栏
 *  1. 目前 router mate icon 字段支持 内置 ant-design-vue 的 icon, 自定义 icon, iconfont 的 icon
 *  2. 如果是内置的 icon，直接使用 ant-design-vue 的 icon 组件
 *  3. 如果是自定义的 icon，直接使用 icon-xxx 字符串
 */
function generateSidebar(): ItemType[] {
	return [
		{
			type: 'group',
			label: locale.value.menu.grup1,
			children: [
				{
					label:
						locale.value.menu['/home/index'] ||
						DashBoard?.meta?.title,
					key: '/home/index',
					icon: parseMenuICon(DashBoard?.meta?.icon)
				},
				{
					label:
						locale.value.menu['/home/project'] ||
						Project?.meta?.title,
					key: '/home/project',
					icon: parseMenuICon(Project?.meta?.icon)
				},
				{
					label: locale.value.menu['/home/task'] || Task?.meta?.title,
					key: '/home/task',
					icon: parseMenuICon(Task?.meta?.icon)
				},
				{
					label:
						locale.value.menu['/home/schedule'] ||
						Schedule?.meta?.title,
					key: '/home/schedule',
					icon: parseMenuICon(Schedule?.meta?.icon)
				}
			]
		},
		{
			type: 'group',
			label: locale.value.menu.grup2,
			children: [
				{
					label:
						locale.value.menu['/home/knowledge'] ||
						Knowledge?.meta?.title,
					key: '/home/knowledge',
					icon: parseMenuICon(Knowledge?.meta?.icon)
				},
				{
					label:
						locale.value.menu['/home/users'] || User?.meta?.title,
					key: '/home/users',
					icon: parseMenuICon(User?.meta?.icon)
				},
				// {
				// 	label:
				// 		locale.value.menu['/home/message'] ||
				// 		Message?.meta?.title,
				// 	key: '/home/message',
				// 	icon: parseMenuICon(Message?.meta?.icon)
				// },
				{
					label:
						locale.value.menu['/home/statistics'] ||
						Statistics?.meta?.title,
					key: '/home/statistics',
					icon: parseMenuICon(Statistics?.meta?.icon)
				}
			]
		}
	];
	// const { routes } = router.options;

	// const homePath = routes.find(i => i.path === '/home');

	// if (!homePath) return [];

	// const items = homePath.children!.map(route => {
	// 	return {
	// 		key: route.path,
	// 		label: locale.value.menu[route.path] || route.meta?.title,
	// 		icon: parseMenuICon(route.meta?.icon),
	// 		children: route.children?.map(child => ({
	// 			key: child.path,
	// 			label: child.meta?.title,
	// 			icon: parseMenuICon(child.meta?.icon)
	// 		}))
	// 	};
	// });

	// return items;
}

/**
 * 处理 icon
 */
function parseMenuICon(icon: unknown | Function | string | undefined) {
	if (!icon) return h('span'); // 提供一个默认的空 span

	// 内置 AntDesign 的 icon
	if (typeof icon === 'function') return h(<Component>icon);

	// 自定义 icon font 的 icon
	if (typeof icon === 'string' && icon.startsWith('icon-'))
		return h('i', { class: ['iconfont', icon] });
}

// 处理 router 信息，通过 传入 唯一的 path 获取 router 的对象信息
function getRouterInfo(path: string): RouteRecordRaw | undefined {
	const { routes } = router.options;
	const homePath = routes.find(i => i.path === '/home');
	if (!homePath) return;

	const route = homePath.children?.find(i => i.path === path);
	return route;
}

export { generateSidebar };
